<script setup>
import { ref, onMounted } from 'vue'
import TitleValue from '@components/TitleValue'
import { common } from '@utils'

const props = defineProps({
    data: Object,
    yesNo: Array
})

const goods = ref()
const goodsDetail = ref()

onMounted(() => {
    if (props.data.productSnapshot) {
        let productSnapshot =
            typeof props.data.productSnapshot == 'string'
                ? JSON.parse(props.data.productSnapshot)
                : props.data.productSnapshot
        goods.value =
            typeof productSnapshot.goods == 'string'
                ? JSON.parse(productSnapshot.goods)
                : productSnapshot.goods
        goods.value.name = goods.value.name ? goods.value.name : goods.value.productName
        goods.value.id = goods.value.productId ? goods.value.productId : goods.value.id
        goods.value.bayOut = goods.value.bayOut ? goods.value.bayOut : goods.value.isPurchase
        goods.value.relet = goods.value.relet ? goods.value.relet : goods.value.isRenewal
        goodsDetail.value =
            typeof productSnapshot.goodsDetail == 'string'
                ? JSON.parse(productSnapshot.goodsDetail)
                : productSnapshot.goodsDetail
        if (!goodsDetail.value) {
            productSnapshot.productSkuSpecList.forEach((element) => {
                if (element.skuId == obj.value.goodsDetailId) {
                    goodsDetail.value = {
                        color: element.colorName,
                        id: element.skuId,
                        newAndOldDegree: element.oldNewDegree,
                        norms: element.specName
                    }
                }
            })
        }
    }
})

</script>
    
<template>
    <el-row :gutter="16" v-if="goods">
        <el-col :span="6">
            <title-value title="商品名:" :value="goods.name" />
        </el-col>
        <el-col :span="6">
            <title-value title="是否可买断:" :value="common.getValueByKey('val', goods.bayOut, yesNo, 'label')" />
        </el-col>
        <el-col :span="5">
            <title-value title="是否可续租:" :value="common.getValueByKey('val', goods.relet, yesNo, 'label')" />
        </el-col>
        <el-col :span="7">
            <title-value title="商品ID:"  :value="goods.id" />
        </el-col>
    </el-row>
    <el-row :gutter="16" v-if="goods">
        <el-col :span="6">
            <title-value title="颜色:" :value="goodsDetail.color" />
        </el-col>
        <el-col :span="6">
            <title-value title="新旧程度:" :value="goodsDetail.newAndOldDegree" />
        </el-col>
        <el-col :span="5">
            <title-value title="规格:" :value="goodsDetail.norms" />
        </el-col>
        <el-col :span="7">
            <title-value title="SKU的ID:" :value="goodsDetail.id" />
        </el-col>
    </el-row>
</template>
        